import themeColor from "../assets/js/theme-color.js";
import './index.less'
class Confirm {
    static num = 0;
    constructor(title, message, { type, confirmButtonText, cancelButtonText, beforeClose }) {
        this.title = title || "提示";
        this.message = message || "";
        this.type = type || "warning";
        this.confirmButtonText_b = confirmButtonText || "确定";
        this.cancelButtonText = cancelButtonText || "取消";
        this.beforeClose = beforeClose || ((buttonText, instance, next) => { next() });
        this.confirmDisable_b = false;
    }

    get confirmDisable() {
        return this.confirmDisable_b
    }

    set confirmDisable(val) {
        this.confirmDisable_b = val;
        this.update();
    }

    get confirmButtonText() {
        return this.confirmButtonText_b;
    }

    set confirmButtonText(val) {
        this.confirmButtonText_b = val;
        this.update();
    }

    init() {
        let element = document.createElement('div');
        element.className = 'q-confirm-box';
        element.id = Confirm.num++;
        this.elementId = Confirm.num;
        element.innerHTML = this.getHTML();
        this.element = element;
        this.append(element);

        return new Promise((resolve, reject) => {
            let cancelBtn = document.getElementById('cancelBtn' + this.elementId);
            let confirmBtn = document.getElementById('confirmBtn' + this.elementId);
            cancelBtn.addEventListener('click', () => {
                this.beforeClose('cancel', this, () => {
                    this.remove();
                    reject();
                });
            })
            confirmBtn.addEventListener('click', () => {
                console.log(111, '11')
                this.beforeClose('confirm', this, () => {
                    this.remove();
                    resolve();
                });
            })
        })
    }
    getHTML() {
        let icon = '', iconColor = '';
        switch (this.type) {
            case "success":
                icon = 'iconfont icon-chenggong';
                iconColor = themeColor.success
                break;
            case "warning":
                icon = 'iconfont icon-jinggao';
                iconColor = themeColor.warning
                break;
            case "info":
                icon = 'iconfont icon-icon';
                iconColor = themeColor.info
                break;
            case "error":
                icon = 'iconfont icon-shibai';
                iconColor = themeColor.error
                break;
        }
        const html = `
            <div class="q-confirm-mask"></div>
            <div class="q-confirm-main">
                <div class="title">
                    <i class='${icon} icon' style="color:${iconColor}"></i>
                    ${this.title}
                </div>
                <div class='message'>${this.message}</div>
                <div class="btns">
                    <button id='cancelBtn${this.elementId}'>${this.cancelButtonText}</button>
                    <button id='confirmBtn${this.elementId}'>${this.confirmButtonText}</button>
                </div>
            </div>
        `
        return html
    }
    // 更新
    update() {
        clearTimeout(this.updateClearTimeBar);
        this.updateClearTimeBar = setTimeout(() => {
            let cancelBtn = document.getElementById('cancelBtn' + this.elementId);
            let confirmBtn = document.getElementById('confirmBtn' + this.elementId);
            let html = '';
            if (this.confirmDisable) {
                confirmBtn.setAttribute('disabled', true);
                cancelBtn.style.visibility = 'hidden';
                confirmBtn.style.color = '#fff';
                html = `
                    <i class='iconfont icon-jiazai animate'></i>
                    ${this.confirmButtonText}
                `
            } else {
                confirmBtn.removeAttribute('disabled');
                cancelBtn.style.visibility = 'visible';
                confirmBtn.style.color = '';
                html = `
                    ${this.confirmButtonText}
                `
            }

            cancelBtn.innerText = this.cancelButtonText;
            confirmBtn.innerHTML = html;
            this.updateClearTimeBar = undefined;
        }, 30);

    }

    append(el) {
        this._HtmlHiddenScroll();
        el.classList.add('q-confirm-fade-in')
        document.body.appendChild(el)
    }



    remove() {
        this._HtmlVisibleScroll()
        this.element.classList.add('q-confirm-fade-out');
        setTimeout(() => {
            Confirm.num--;
            document.body.removeChild(this.element)
        }, 300);
    }

    // 显示滚动条
    _HtmlVisibleScroll() {
        let html = document.getElementsByTagName('html')[0];
        let body = document.body;
        html.style.overflow = "visible";
        body.style.overflow = "visible";
    }
    // 隐藏滚动条
    _HtmlHiddenScroll() {
        let html = document.getElementsByTagName('html')[0];
        let body = document.body;
        html.style.overflow = "hidden";
        body.style.overflow = "hidden";
    }
}
export default Confirm;